<template>
	<view class="login-page flex flex-column">
		<view class="login-page-header flex flex-column">
			<input type="number" :maxlength="11" placeholder="请输入手机账号" class="login-input-phone" v-model="loginForm.username" />
			<input type="password" placeholder="请输入密码" class="login-input-password" v-model="loginForm.password" />
			<view class="tip-text flex flex-center"><view>还没有账号?去</view>
			<navigator url="/pages/register" :render-link="false" hover-class="none" class="tip-text-register">注册</navigator></view>
			<view class="login-button" @tap="login"><text>登 录</text></view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { http } from '@/utils/request'
	import { clientId } from '@/config/config.js'
	const loginForm = reactive({
		username: 'test',
		password: '123123',
		clientId: clientId
	})
	const login = () => {
		if(!loginForm.username || !loginForm.password){
			uni.showToast({
				title: '请输入手机账号和密码',
				icon: 'none'
			})
			return
		}

		http.request({
			url: '/app/user/login',
			method: 'POST',
			data: {
				username: loginForm.username,
				password: loginForm.password,
				clientId: loginForm.clientId
			}
		}).then(res => {
			if(res.code === 200){
				uni.setStorageSync('token', res.data.access_token)
				uni.showToast({
					title: '登录成功',
					icon: 'none'
				})
				uni.switchTab({ url: '/pages/tabs/chat' })
			}
		})
	}
</script>

<style lang="scss" scoped>
	.login-page{
		height: 100%;
		justify-content: center;
		align-items: center;
		padding: 0 90rpx;
	}
	.login-page-header{
		font-size: 32rpx;
		width: 100%;
		.login-input-phone,
		.login-input-password{
			font-size: 26rpx;
			height: 80rpx;
			border: 1px solid #E5E5E5;
			border-radius: 58rpx;
			padding: 0 24rpx;
		}
		.login-input-password{
			margin-top: 34rpx;
		}
		.tip-text{
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 120rpx;
			margin-top: 18rpx;
			text-align: center;
			.tip-text-register{
				color: #F35570;
				padding: 10rpx;
			}
		}
		.login-button{
			padding: 24rpx 48rpx;
			background: linear-gradient(90deg, #49f6fc 20%, #c5ff59 100%);
			text-align: center;
			border-radius: 58rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: 500;
			flex: 1;
		}
	}
</style>
